<template>
	<div class="tab-list-cnt">
		<div class="tab-list">
			<div v-for="(tab,index) in tabList" :key="index" :class="'tab-item'" @click="tabChange(index)">
				<!-- <svg-icon color="#844ca8" :icon-class="tab.icon" class="tab-icon"/> -->
				<div>{{ tab.label }}</div>
			</div>
			<div :style="{ 'transform': `translateX(${activeTabIndex * 100}%)` }" class="tab-selected">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			tabList: {
				type: Array,
				default: () => [],
			},
			activeTabIndex: {
				type: Number,
				require: true
			}
		},
		data() {
			return {}
		},
		methods: {
			tabChange(index) {
				this.$emit("handleChange", index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$tab-height: 52px;
	$active-color: #ffffff;
	$default-color: #ede6f2;
	$primary-color: #844ca8;

	@mixin tabSelected($bgColor, $skewX) {
		position: absolute;
		width: 12px;
		height: $tab-height;
		background: $bgColor;
		transform: skewX($skewX); // 重点
	}

	.tab-list-cnt {
		position: sticky;
		top: 0;
		border-radius: 12px 12px 0 0;
		background-color: $default-color;
		overflow: hidden;
		z-index: 2;
	}

	.tab-list {
		position: relative;
		display: flex;
		border-radius: 12px 12px 0 0;

		.tab-item {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-basis: 50%;
			height: $tab-height;
			color: $primary-color;
			font-size: 15px;
			font-weight: 600;
			cursor: pointer;
		}

		.tab-icon {
			width: 18px;
			height: 18px;
			margin-right: 8px;
			margin-top: 1px;
		}

		.tab-selected {
			position: absolute;
			width: 50%;
			height: $tab-height;
			background: #ffffff;
			border-radius: 12px 12px 0 0;
			box-shadow: 24px 40px 0 $active-color, -24px 40px 0 0 $active-color; // 重点
			opacity: 1;
			z-index: -1;
			transition: .3s ease-in-out;

			.left {
				@include tabSelected($default-color, -15deg);
				left: -18px;
				border-bottom-right-radius: 12px;
			}

			.right {
				@include tabSelected($default-color, 15deg);
				right: -18px;
				border-bottom-left-radius: 12px;
			}
		}

		.tab-selected::before {
			content: '';
			@include tabSelected($active-color, -15deg);
			left: -6px;
			border-top-left-radius: 12px;
		}

		.tab-selected::after {
			content: '';
			@include tabSelected($active-color, 15deg);
			right: -6px;
			border-top-right-radius: 12px;
		}
	}
</style>